<!-- LineChart.vue 2023/5/18 @wanghaoran -->
<!-- 折线图 -->
<template>
  <div class="line-chart" ref="chartRef"></div>
</template>

<script>
export default {
  name: 'LineChart'
}
</script>

<script setup>
import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
import * as echarts from 'echarts'
import { deepMergeObjects, generateLighterColors } from '../../../utils/objectUtils'

const props = defineProps({
  // x 轴，图表分类
  category: {
    type: Array,
    default: () => {
      return []
    }
  },
  // y 轴, 图表值
  values: {
    type: Array,
    default: function () {
      return []
    }
  },
  // 标题
  title: {
    type: String,
    default: ``
  },
  seriesName: {
    type: String,
    default: ``
  },
  // 主题色
  themeColor: {
    type: String,
    default: `rgba(108, 80, 243, 1)`
  },
  // echart 的配置项 options 与默认配置合并
  chartOptions: {
    type: Object,
    default: function () {
      return {}
    }
  }
})
// echart5 版本 echart实例不能是vue3的响应式实例，会影响tooltip
let chart = null
const chartRef = ref(null)
// 根据主题色生成颜色
let colorList = generateLighterColors(props.themeColor)

const options = {
  title: {
    text: props.title,
  },
  grid: {
    top: '15%',
    left: '5%',
    right: '2%',
    bottom: '15%',
    // containLabel: true
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    // axisPointer: {
    //   lineStyle: {
    //     color: {
    //       type: 'linear',
    //       x: 0,
    //       y: 0,
    //       x2: 0,
    //       y2: 1,
    //       colorStops: [{
    //         offset: 0,
    //         color: 'rgba(0,255,233,0.2)'
    //       }, {
    //         offset: 0.3,
    //         color: 'rgba(139,139,139,0.9)',
    //       }, {
    //         offset: 0.7,
    //         color: 'rgba(139,139,139,0.9)',
    //       }, {
    //         offset: 1,
    //         color: 'rgba(0,255,233,0.2)'
    //       }],
    //       global: false
    //     }
    //   },
    // },
  },
  xAxis: [{
    type: 'category',
    axisLine: {
      show: true
    },
    splitArea: {
      // show: true,
      color: '#f00',
      lineStyle: {
        color: '#f00'
      },
    },
    axisLabel: {
      color: '#7f7f7f'
    },
    splitLine: {
      show: true
    },
    boundaryGap: false,
    data: props.category,

  }],
  yAxis: [
    {
      type: 'value',
      min: 0,
      // max: 140,
      splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(240, 242, 245,0.8)'
        }
      },
      axisLine: {
        show: true,
      },
      axisLabel: {
        show: true,
        margin: 20,
        textStyle: {
          color: '#7f7f7f',

        },
      },
      axisTick: {
        show: false,
      },
    }],
  series: [
    {
      name: props.seriesName,
      type: 'line',
      // tooltip: {
      //   show: true,
      // },
      // smooth: true, //是否平滑
      showAllSymbol: true,
      // symbol: 'image://./static/images/guang-circle.png',
      symbol: 'circle',
      markPoint: {
        data: [
          // { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 },
          { type: 'max', name: '最大' },
        ]
      },
      symbolSize: 10,
      // lineStyle: {
      //     normal: {
      //         color: "#6c50f3",
      //         shadowColor: 'rgba(0, 0, 0, .3)',
      //         // shadowBlur: 0,
      //         // shadowOffsetY: 5,
      //         // shadowOffsetX: 5,
      //     },
      // },
      label: {
        show: true,
        position: 'bottom',
        textStyle: {
          color: colorList[0],
        }
      },
      itemStyle: {
        color: colorList[0],
        borderColor: '#fff',
        borderWidth: 3,
        shadowColor: 'rgba(0, 0, 0, .3)',
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2,
      },

      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: colorList[5],
          },
            {
              offset: 1,
              color: 'rgba(108,80,243,0)'
            }
          ], false),
          shadowColor: colorList[1],
          shadowBlur: 20
        }
      },
      data: props.values.map(Number)
    },

  ]
}
const setOption = (option = options) => {
  option.xAxis.data = props.category
  option.title.text = props.title
  option.series[0].data = props.values.map(Number)
  option.series[0].name = props.seriesName
  colorList = generateLighterColors(props.themeColor)
  option.series[0].itemStyle.color = colorList[0]
  option.series[0].label.textStyle.color = colorList[0]
  option.series[0].areaStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: colorList[5],
  },
    {
      offset: 1,
      color: 'rgba(108,80,243,0)'
    }
  ], false)
  option.series[0].areaStyle.normal.shadowColor = colorList[1]
  console.log(colorList)
  const opt = deepMergeObjects(option, props.chartOptions)
  console.log(opt)
  chart.setOption(opt, true)
}
const initChart = () => {
  chart = echarts.init(chartRef.value)
}

onMounted(() => {
  initChart()
  setOption()
  watchEffect(() => {
    setOption()
  })
  // 监听窗口的 resize 事件
  const resizeHandler = () => {
    if (chart != null) {
      try {
        setOption()
        chart.resize()
      } catch (error) {
        console.error('Resize error:', error)
      }
    }
  }
  window.addEventListener('resize', resizeHandler)

  // 组件卸载时移除事件监听器
  onUnmounted(() => {
    window.removeEventListener('resize', resizeHandler)
    if (chart != null) {
      chart.dispose()
    }
  })
})


</script>

<style scoped>
.line-chart {
  position: absolute;
  height: 100%;
  width: 100%;
}
</style>
